---
title: Getting State
---

import { TransitioningStackDiagram } from "../../../components/diagrams/TransitioningStackDiagram";
import { APITable } from "../../../components/APITable";

# Getting State

The internal state of **Stackflow** can be described in one word: a **stack** data structure with **transition states**.

<TransitioningStackDiagram />

The activities accessible through the `activities` field contain information related to their basic existence, such as ID, name, and the current transition state. These state values are utilized in various ways to create the `@stackflow/plugin-basic-ui`. (You can create one too!)

## Utilizing Stack State in Rendering

To access the stack state in a UI component, use the `useStack()` hook.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { useStack, type ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const stack = useStack();
  const { replace } = useFlow();

  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };

  useEffect(() => {
    console.log("Stacked Activities:", stack.activities);
    console.log("Current Transition State:", stack.globalTransitionState);
    console.log(
      "Initial Transition Duration Options",
      stack.transitionDuration,
    );
  }, [stack]);

  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;
```

There are the following fields in the stack state.

<APITable>
|                       |                   |                                                 |
| --------------------- | ----------------- | ----------------------------------------------- |
| activities            | `Activity[]`      | list of activites                               |
| transitionDuration    | `number`          | `transitionDuration` value set in `stackflow()` |
| globalTransitionState | `idle`, `loading` | if current activity is animating or not         |
</APITable>

## Utilizing Activity State in Rendering

You can use the `useActivity()` hook to get information about the current activity.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { useActivity, type ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const activity = useActivity();
  const { replace } = useFlow();

  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };

  useEffect(() => {
    console.log("Transition State of Current Activity:", activity.transitionState);
  }, [activity]);

  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;
```

The fields in the activity state are as follows.

<APITable>
|                     |                                                          |                                                                              |
| ------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- |
| id                  | `string`                                                 | Activity ID                                                                  |
| name                | `string`                                                 | Registered activity name                                                     |
| transitionState     | `enter-active`, `enter-done`, `exit-active`, `exit-done` | Transition state of the activity                                             |
| params              | `Object`                                                 | Parameters passed to the activity                                            |
| isActive            | `boolean`                                                | Whether is active activity (`false` when `transitionState` is `exit-active`) |
| isTop               | `boolean`                                                | Whether is top activity (`true` when `transitionState` is `exit-active`)     |
| isRoot              | `boolean`                                                | Whether is root activity                                                     |
</APITable>

## Customize UI

You can freely customize the UI by using states such as `useActivity()` and `useStack()` in the desired component.

If you want to utilize the UI provided by `@stackflow/plugin-basic-ui`, use the provided `AppScreen` component.

---

Do you want to extend the UI or logic and share it with other developers? Let's move on to learn how to create a plugin.
